<html>
  <head>
    <title>pagination | riot-component</title>
    <link rel="stylesheet" href="../pagination/style.css">
  </head>
  <body>



    <pagination-demo/>

    <!-- 规范：调用组件时 控制语句放第一位，ref放第二，传参随后 -->
    <script type="riot/tag">
      <pagination-demo>

        <h2>分页组件</h2>
        <p>
          附加测试：一秒延迟跳到分页5
        </p>
        <pagination "{pages>1}"
          pages="{pages}"
          page="{page}"
          on-change={ev.pageOnChange}>
        </pagination>

        <h2>分页组件带下拉框</h2>
        <pagination "{pages2>1}"
          pages="{pages2}"
          page="{page2}"
          select="y"
          on-change={ev.pageOnChange2}>
        </pagination>

          var tag = this;
          tag.pages = 1;
          tag.page = 1;
          tag.page2 = 1;
          tag.pages2 = 1;
          tag.ev = {
            pageOnChange: function(page){
              console.log('page to : ', page);
              tag.update({
                page: page
              });
            },
            pageOnChange2: function(page){
              console.log('page2 to : ', page);
              tag.update({
                page2: page
              });
            }
          }
          tag.on('mount', function(){

            // 模拟ajax请求完数据后 pages 发生变化
            setTimeout(function(){
              tag.update({
                pages: 10,
                pages2: 20
              });
            }, 100);

            // 模拟发送给组件分页数
            setTimeout(function(){
              tag.update({
                page: 1,
                page2: 1
              });
            }, 1000);

          });
      </pagination-demo>
    </script>

    <script src='https://unpkg.com/riot@3.3.2/riot+compiler.min.js'></script>
    <script src="../pagination/component.js"></script>
    <script>
      riot.mount('pagination-demo');
    </script>
  </body>
</html>
